<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>plot 绘制图像</title>
</head>

<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
<script type="text/javascript" src="../../js/libs/jquery.min.js "></script>
<script type="text/javascript" src="../../js/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../js/libs/vue/vue.js"></script>
<script type="text/javascript" src="../../js/libs/vue/axios.min.js"></script>
<script type="text/javascript" src='../../js/libs/plotly/plotly-latest.min.js'></script>


<!-- test -->
<script>
	var total_bills= [];
	var tips = [];
	var sexs = [];
	var smokers = [];
	var days = [];
	var times = [];
	var sizes = [];
	axios.get('./json/5.json').then( res=>{
		$.each(res.data ,function(i,row){
			total_bills.push(row.total_bill);
			tips.push(row.tip);
			sexs.push(row.sex);
			smokers.push(row.smoker);
			days.push(row.day);
			times.push(row.time);
			sizes.push(row.size);
		})
		//初始化小提琴图
		init();
	})
	
  
  function init(){
	  var data = [{
	    type: 'violin',
	    x: days,
	    y: total_bills,
	    points: 'none',
	    box: {
	      visible: true
	    },
	    line: {
	      color: 'green',
	    },
	    meanline: {
	      visible: true
	    },
	    transforms: [{
	     type: 'groupby',
	  	 groups: days,
	  	 styles: [
	  		{target: 'Sun', value: {line: {color: 'blue'}}},
	  		{target: 'Sat', value: {line: {color: 'orange'}}},
	  		{target: 'Thur', value: {line: {color: 'green'}}},
	  		{target: 'Fri', value: {line: {color: 'red'}}}
	  	 ]
	  	}]
	  }]
	  
	  var layout = {
	    title: "Multiple Traces Violin Plot",
	    yaxis: {
	      zeroline: false
	    }
	  }
	  
	  Plotly.newPlot('myDiv', data, layout);
  }

</script>

</html>